<template>
    <div class="myform">
        账号：<input type="text" v-model="username" />
        <br />
        <br />
        密码：<input type="text" v-model="userpasswd" />
        <br />
        <br />
        <button v-on:click="sub">提交</button>
    </div>
</template>

<script>
export default {
    name: 'axios-post2',
    // 先把变量定义出来
    data() {
        return {
            username: '',
            userpasswd: ''
        };
    },
    // 这里面定义的函数会被v-on:click调用
    methods: {
        // 被v-on:click调用
        sub: function() {
            axios({
                // =========================
                // data_form的方式
                // =========================
                // headers: {
                //     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                // },

                // =========================
                // json的方式
                // =========================
                headers: {
                    'Content-Type': 'application/json'
                },
                url: 'http://localhost:5000/post-json',
                method: 'post',
                data: {
                    // key=username，value=this.username
                    // 因为click事件时才会触发这个函数，因此此时username的值就等于文本框里的值
                    username: this.username,
                    userpasswd: this.userpasswd
                }
            })
                .then(function(response) {
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    }
};
</script>

<style>
    .myform{
        border: 1px solid #000000;
        background-color: aqua;
    }
</style>
